<template>
  <!-- fix：lock-scroll 阻止了 scroll -->
  <van-popup class="player-playlist"
    v-model="isShow"
    round overlay
    :lock-scroll="false"
    :style="{ background: 'transparent' }"
    position="bottom">
    <div class="player-playlist__wrapper">
      <div class="pl-title">
        <span>当前播放</span>
        <span class="pl-title__count">({{ playlist.length }})</span>
      </div>
      <div class="pl-menu">
        <div class="pl-menu__left"></div>
      </div>
      <base-scroll class="pl-list-wrapper" ref="scroll"
        :options="scrollOptions"
        :data="playlist">
        <div class="pl-list">
          <p class="pl-list__item" :ref="item.id"
            :class="{ 'is-play': item.id === songId}"
            v-for="item of playlist" :key="item.id"
            @click="$store.dispatch('player/changeSong', { song: item, toPlayer: false })">
            <svg-icon class="item-sound"
              icon-class="sound"
              v-show="item.id === songId"/>
            <span class="item-name">{{ item.name }}</span>
            <span class="item-separator">-</span>
            <span class="item-ar">{{ formatArtists(item.ar) }}</span>
            <svg-icon class="item-close"
              icon-class="close"
              @click.stop="$store.dispatch('player/removeFromPlaylist', item.id)"/>
          </p>
        </div>
      </base-scroll>
      <div class="pl-footer" @click="$emit('update:showPlaylist', false)">关 闭</div>
    </div>
  </van-popup>
</template>

<script>
import { formatArtists } from '@/utils'

export default {
  name: 'player-playlist',
  props: {
    showPlaylist: { type: Boolean, default: false },
    songId: { type: Number, default: 0 },
    playlist: { type: Array, default: () => [] }
  },
  data () {
    return {
      scrollOptions: {
        scrollX: false,
        scroollY: true,
        click: true
      }
    }
  },
  beforeDestroy () {
    this.$refs.scroll && this.$refs.scroll.destroy()
  },
  computed: {
    // 子组件不能修改 prop，使用 setter 变通
    isShow: {
      get () {
        return this.showPlaylist
      },
      set () {
        this.$emit('update:showPlaylist', false)
      }
    }
  },
  methods: {
    formatArtists (ar) {
      return formatArtists(ar)
    }
  },
  watch: {
    showPlaylist (newVal) {
      if (newVal) {
        this.$nextTick(_ => {
          this.$refs.scroll.refresh()
          const el = this.$refs[this.songId][0]
          this.$refs.scroll.scrollToElement(el, 200, true, true)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.player-playlist {
  box-sizing: border-box;
  height: 70%;
  font-size: .14rem;
  color: #000;
  padding: 0 .2rem .1rem;
  &__wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: .2rem;
  }

  .pl-title {
    box-sizing: border-box;
    height: .4rem;
    padding: 0 .1rem;
    line-height: .4rem;
    font-size: .18rem;
    vertical-align: middle;
    /* background-color: #ccc; */
    &__count {
      font-size: .14rem;
      color: #ccc;
    }
  }
  .pl-list-wrapper {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    height: 0;
    padding: 0 .1rem;
  }
  .pl-list {
    &__item {
      box-sizing: border-box;
      display: flex;
      height: .4rem;
      line-height: .4rem;
      &.is-play {
        .item-name, .item-separator, .item-ar {
          color: red !important;
        }
      }
      &:not(:last-child) {
        border-bottom: 1px solid rgb(225, 225, 225);
      }
      .item-sound {
        color: red;
        margin-right: 5px;
        font-size: .18rem;
      }
      .item-name {
        max-width: 60%;
        @include ellipsis();
      }
      .item-separator {
        width: 10px;
        text-align: center;
      }
      .item-ar {
        flex: 1;
        font-size: .12rem;
        color: #868686;
        @include ellipsis();
      }
      .item-close {
        font-size: .16rem;
        color: #868686;
      }
    }
  }
  .pl-footer {
    height: .4rem;
    line-height: .4rem;
    font-size: .20rem;
    text-align: center;
    border-top: 1px solid rgb(225, 225, 225);
  }
}
</style>
